<template>
  <div class="view">
    <div class="usertop flexc">
      <span class="flex title">{{$t('myWallet.buyOrSellNet')}}</span>
    </div>
    <div class="ram">
      <el-row :gutter="20" class="pd8px">
        <el-col :span="12"><el-button class="btn plain" type="primary" plain
          :class="{'blur-btn': activeIndex === 2}"
          @click="activeIndex = 1">{{$t('myWallet.mortgageAcquisition')}}</el-button></el-col>
        <el-col :span="12"><el-button class="btn plain" type="primary" plain
        :class="{'blur-btn': activeIndex === 1}"
          @click="activeIndex = 2">{{$t('myWallet.redemptionAndRelease')}}</el-button></el-col>
      </el-row>
      <!-- 买入 -->
      <div class="buy pd8px" v-if="activeIndex === 1">
        <div class="data pd8px" style="padding-bottom: 2px;">
          <el-input v-model="buy" type="number" @change="handleInputBuy" step="0.0001" min="0.0001">
            <template slot="append">EOS</template>
            </el-input>
          <span class="balance fr pd8px gray">{{$t('myWallet.balance')}}：{{ eosBalance }}</span>
        </div>
        <!-- 百分比 -->
        <div class="percent">
          <el-button class="btn" type="primary" @click="handleBuyNet">{{$t('myWallet.sureMortgage')}}</el-button>
        </div>
      </div>
      <!-- 卖出 -->
      <div class="pd8px" v-if="activeIndex === 2">
        <div class="data pd8px" style="padding-bottom: 2px;">
          <el-input v-model="sell" type="number" @change="handleInputSell" step="0.0001" min="0.0001">
            <template slot="append">EOS</template>
          </el-input>
          <span class="balance fr pd8px gray">{{$t('myWallet.ableMortgage')}}：{{ net }}</span>
        </div>
        <el-button class="btn" type="primary" @click="handleSellNet">{{$t('myWallet.sureRedeem')}}</el-button>
      </div>
    </div>
    <div class="tip gray myTip">
      <div class="pd8px">· {{$t('myWallet.otherTip1')}}</div>
      <div class="pd8px">· {{$t('myWallet.otherTip2')}}</div>
    </div>
  </div>
</template>

<script>
// EOS 账户文件
import { EosModel } from '@/utils/eos';
import { toFixed } from '@/utils/validate';

export default {
  data() {
    return {
      percent: '',
      activeIndex: 1,
      cpu: '0 EOS',
      buy: '',
      sell: '',
      net: '',
    }
  },
  props: {
    totalResources: {
      type: Object,
      default: null,
    },
    eosBalance: {
      type: String,
      default: '0.0000 EOS'
    },
    symbolScience: {
      type: String,
      default: 'EOS'
    },
  },
  watch: {
    totalResources: function change() {
      this.handleGetInfo();
    }
  },
  created() {
  },
  mounted() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
    this.handleGetInfo();
  },
  methods: {
    handleInputBuy(str) {
      this.buy = toFixed(Number(str), 4);
    },
    handleInputSell(str) {
      this.sell = toFixed(Number(str), 4);
    },
    // 获取账户信息
    handleGetInfo() {
      const result = this.totalResources;
      if (result) {
        if (!result.self_delegated_bandwidth.net_weight) {
          this.net = '0.0000 EOS'
          return;
        }
        this.net = result.self_delegated_bandwidth.net_weight;
      }
    },
    handleBuyNet() {
      // 抵押cup/net
      if (isNaN(this.buy) || this.buy === '' || this.buy === '0.0000') {
        this.$message.error(this.$t('public.inputRightNum'));
        return;
      }
      const arr = [this.buy];
      arr.push(this.symbolScience);
      const params = arr.join(' ');
      const obj = {
        net_quantity: params,
        cpu_quantity: `0.0000 ${this.symbolScience}`,
        transfer: 0,
        receiver: null,
      };
      EosModel.eosDelegatebw(obj, (res) => {
        if (res.processed) { // 抵押net成功
          this.$message.success(this.$t('myWallet.diyaSuccess'));
          this.buy = '';
          // 获取账户明细
          this.$emit('listenGetAccount');
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
    handleSellNet() {
      // 释放 cpu/net
      if (isNaN(this.sell) || this.sell === '' || this.sell === '0.0000') {
        this.$message.error(this.$t('public.inputRightNum'));
        return;
      }
      const arr = [this.sell];
      arr.push(this.symbolScience);
      const params = arr.join(' ');
      const obj = {
        net_quantity: params,
        cpu_quantity: `0.0000 ${this.symbolScience}`,
      };
      EosModel.eosUndelegatebw(obj, (res) => {
        if (res.processed) { // 抵押net成功
          this.$message.success(this.$t('myWallet.shuHuiSuccess'));
          // 获取账户明细
          this.$emit('listenGetAccount');
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/views/myWallet/user.scss';
@import '@/assets/css/variables.scss';
@import '@/views/myWallet/eosResource/resource.scss';

.view{
  box-shadow: none;

  .usertop {
    font-size: 18px;
    padding-top: 0;
    text-align: center;

    &::before {
      display: none;
    }
  }
  .ram{
    padding-top: 10px;

    .plain{
      background: #e9f4fb;
      color: #278EDA;

      &:focus,
      &:hover{
        background: #e9f4fb;
        color: #278EDA;
      }
    }

    .blur-btn{
      border-color: #e2e2e2;
      color: #777;
      background: transparent;
    }
  }

  .tip {
    padding-left: 90px;
  }
}
.theme-1B1D27{
  .view{
    .blur-btn{
      border-color: #4e5b85;
    }
  }
}
</style>
